<template>
  <div class="hello">
    <el-form label-position="right" label-width="200px;">
      <el-row>
        <el-col :span="6">
          <el-form-item label="模块数量">
            <el-input-number v-model="modelSize" @change="handleChange" :min="1" :max="999999999"
                             label="模块数量"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="起始数量">
            <el-input-number v-model="onceBuyNum" @change="handleChange" :min="1" :max="999999999"
                             label="起始数量"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="执行数量">
            <el-input-number v-model="buyTimes" @change="handleChangeBuyTimes" :min="1" :max="999999999"
                             label="购买数量"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" @click="buyClick" :disabled="!canBuy">购买</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="扣除基数">
            <el-input-number v-model="baseNum"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          A:{{AResult}},B:{{BResult}},C:{{CResult}},D:{{DResult}}<br/>
          累计中注:<span @click="handleDetail(totalDataList)">{{hitTotalSize}}</span>
        </el-col>
        <el-col :span="6">

          <el-form-item label="系统结果">
            <el-radio-group v-model="systemResult" @change="systemClick" :disabled="canBuy">
              <el-radio-button label="A"></el-radio-button>
              <el-radio-button label="B"></el-radio-button>
              <el-radio-button label="C"></el-radio-button>
              <el-radio-button label="D"></el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" @click="cancelSystem" :disabled="!canCancel">撤销</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-table :data="modelList2" :key="isUpdate">
      <el-table-column label="模块" align="center" prop="modelName"/>
      <el-table-column label="A下注量" align="center">
        <template v-slot="scope">
          <el-tag type="danger" effect="dark" v-if="scope.row.A === scope.row.maxSize && scope.row.A > 0">{{scope.row.A}}</el-tag>
          <span v-else>{{scope.row.A}}</span>
        </template>
      </el-table-column>
      <el-table-column label="B下注量" align="center">
        <template v-slot="scope">
          <el-tag type="danger" effect="dark" v-if="scope.row.B === scope.row.maxSize && scope.row.B > 0">{{scope.row.B}}</el-tag>
          <span v-else>{{scope.row.B}}</span>
        </template>
      </el-table-column>
      <el-table-column label="C下注量" align="center">
        <template v-slot="scope">
          <el-tag type="danger" effect="dark" v-if="scope.row.C === scope.row.maxSize && scope.row.C > 0">{{scope.row.C}}</el-tag>
          <span v-else>{{scope.row.C}}</span>
        </template>
      </el-table-column>
      <el-table-column label="D下注量" align="center">
        <template v-slot="scope">
          <el-tag type="danger" effect="dark" v-if="scope.row.D === scope.row.maxSize && scope.row.D > 0">{{scope.row.D}}</el-tag>
          <span v-else>{{scope.row.D}}</span>
        </template>
      </el-table-column>
      <el-table-column label="累计中注" align="center" prop="hitTotalSize"/>
      <el-table-column label="购买详情" align="center" prop="buyDetailStr">
        <template v-slot="scope">
          <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleDetail(scope.row.dataList)"
          >查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加或修改菜单对话框 -->
    <el-dialog title="查看购买详情" :visible.sync="detailOpen" width="880px" append-to-body>
      <el-table :data="dataList" :key="isUpdate">
        <el-table-column label="局数" align="center" prop="id"/>
        <el-table-column label="A下注量" align="center" prop="A"/>
        <el-table-column label="B下注量" align="center" prop="B"/>
        <el-table-column label="C下注量" align="center" prop="C"/>
        <el-table-column label="D下注量" align="center" prop="D"/>
        <el-table-column label="系统结果" align="center" prop="systemResult"/>
        <el-table-column label="累计下住" align="center" prop="bettingTotalSize"/>
        <el-table-column label="累计中注" align="center" prop="hitTotalSize"/>
        <el-table-column label="购买详情" align="center" prop="buyDetailStr"
                         min-width="120"
                         :show-overflow-tooltip="true"/>
      </el-table>
    </el-dialog>
  </div>

</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      modelList: [],
      hitTotalSize: 0,
      totalDataList: [],
      modelList2: [],
      dataList: [],
      modelSize: 1,
      onceBuyNum: 1,
      onceBuyNum2: 1,
      buyTimes: 1,
      buySubject: '',
      isUpdate: true,
      systemResult: null,
      AResult: null,
      BResult: null,
      CResult: null,
      DResult: null,
      canBuy: true,
      canCancel: false,
      baseNum: 1,
      ABCD: [['A', 'B'], ['A', 'C'], ['A', 'D'], ['B', 'C'], ['B', 'D'], ['C', 'D']],
      ABCD2: [['C', 'D'], ['B', 'D'], ['B', 'C'], ['A', 'D'], ['A', 'C'], ['A', 'B']],
      multiples: [[1,1]],
      detailOpen: false
    }
  },
  methods: {
    buyClick: function () {
      if (!this.canBuy){
        return
      }
      this.canBuy=false
      this.canCancel=false
      while (this.modelList.length < this.modelSize){
        let item = {
          modelName: "模块"+(this.modelList.length+1),
          dataList: [],
          multiples: [[1,1]],
        }
        while (item.multiples.length < this.buyTimes){
          item.multiples.push([1,1])
        }
        this.modelList.push(item)
      }
      this.modelList.forEach(item =>{
        if (item.dataList.length > 0 && !item.dataList[0].systemResult) {
          return
        }
        let bettingList = []
        let bettingList2 = []
        for (let i = 0; i < this.buyTimes; i++) {
          let randomNum = Math.floor(Math.random() * 6)
          bettingList.push(this.ABCD[randomNum])
          bettingList2.push(this.ABCD2[randomNum])
        }
        if (item.dataList.length === 0){
          item.dataList.push({
            buySubject: this.buySubject,
            id: item.dataList.length + 1,
            A: this.onceBuyNum * this.buyTimes,
            B: this.onceBuyNum * this.buyTimes,
            C: this.onceBuyNum * this.buyTimes,
            D: this.onceBuyNum * this.buyTimes,
            buyDetail: bettingList,
            buyDetailStr: bettingList.map(item => item.join('')).join("|"),
          });
        }else {
          // let lastItem = this.dataList[this.dataList.length - 1]
          // let bettingList2 = bettingList.flat()
          item.dataList.splice(0, 0, {
            buySubject: this.buySubject,
            id: item.dataList.length + 1,
            A: (eval(bettingList.map((item2,index)=>item2.indexOf('A') > -1?item.multiples[index][0]:0).join("+"))+
                eval(bettingList2.map((item2,index)=>item2.indexOf('A') > -1?item.multiples[index][1]:0).join("+")))*this.onceBuyNum,
            B: (eval(bettingList.map((item2,index)=>item2.indexOf('B') > -1?item.multiples[index][0]:0).join("+"))+
                eval(bettingList2.map((item2,index)=>item2.indexOf('B') > -1?item.multiples[index][1]:0).join("+")))*this.onceBuyNum,
            C: (eval(bettingList.map((item2,index)=>item2.indexOf('C') > -1?item.multiples[index][0]:0).join("+"))+
                eval(bettingList2.map((item2,index)=>item2.indexOf('C') > -1?item.multiples[index][1]:0).join("+")))*this.onceBuyNum,
            D: (eval(bettingList.map((item2,index)=>item2.indexOf('D') > -1?item.multiples[index][0]:0).join("+"))+
                eval(bettingList2.map((item2,index)=>item2.indexOf('D') > -1?item.multiples[index][1]:0).join("+")))*this.onceBuyNum,
            buyDetail: bettingList,
            buyDetailStr: bettingList.map(item => item.join('')).join("|"),
          });
        }
        let firstElement = item.dataList[0];
        let minSize = Math.min(firstElement.A,firstElement.B,firstElement.C,firstElement.D)
        firstElement.A = firstElement.A - minSize;
        firstElement.B = firstElement.B - minSize;
        firstElement.C = firstElement.C - minSize;
        firstElement.D = firstElement.D - minSize;
        firstElement.bettingTotalSize = eval(item.dataList.map(item => item.A + item.B + item.C + item.D).join("+"))
        item.A = item.dataList[0].A
        item.B = item.dataList[0].B
        item.C = item.dataList[0].C
        item.D = item.dataList[0].D
        item.maxSize = Math.max(item.A,item.B,item.C,item.D)
        item.totalA = eval(item.dataList.map(aa=>aa.A).join("+"))
        item.totalB = eval(item.dataList.map(aa=>aa.B).join("+"))
        item.totalC = eval(item.dataList.map(aa=>aa.C).join("+"))
        item.totalD = eval(item.dataList.map(aa=>aa.D).join("+"))
        item.bettingTotalSize = item.dataList[0].bettingTotalSize
      })

      this.modelList2 = [...this.modelList].sort((a,b)=>b.maxSize - a.maxSize).slice(0,10)
      // debugger
      this.isUpdate = !this.isUpdate;
      this.systemResult = null
      this.AResult = eval(this.modelList.map(item =>item.A).join("+"))
      this.BResult = eval(this.modelList.map(item =>item.B).join("+"))
      this.CResult = eval(this.modelList.map(item =>item.C).join("+"))
      this.DResult = eval(this.modelList.map(item =>item.D).join("+"))
      let minResult = Math.min(this.AResult,this.BResult,this.CResult,this.DResult)
      this.AResult = Math.round((this.AResult - minResult ) / this.baseNum)
      this.BResult = Math.round((this.BResult - minResult ) / this.baseNum)
      this.CResult = Math.round((this.CResult - minResult ) / this.baseNum)
      this.DResult = Math.round((this.DResult - minResult ) / this.baseNum)
      this.totalDataList.splice(0, 0, {
        id: this.totalDataList.length + 1,
        A:this.AResult,
        B:this.BResult,
        C:this.CResult,
        D:this.DResult,
        bettingTotalSize: eval(this.totalDataList.map(item =>item.A+item.B+item.C+item.D).join("+")) + this.AResult+this.BResult+this.CResult+this.DResult
      })
    },
    systemClick() {
      if (this.canBuy){
        return
      }

      console.log("111this.modelList[0].multiples is ",JSON.stringify(this.modelList[0].multiples));
      console.log("111this.modelList[0].multiplesBak is",JSON.stringify(this.modelList[0].multiplesBak));
      this.modelList.forEach(item => {
        if (item.dataList.length === 0 || item.dataList[0].systemResult) {
          return
        }
        let lastItem = item.dataList[0];
        lastItem.systemResult = this.systemResult;
        let prvHitTotalSize = 0
        if (item.dataList.length > 1) {
          prvHitTotalSize = item.dataList[1].hitTotalSize
        }
        lastItem.hitTotalSize = prvHitTotalSize + lastItem[this.systemResult];
        item.multiplesBak=[].concat(JSON.parse(JSON.stringify(item.multiples)));
        lastItem.buyDetail.forEach((item2, index) => {
          if (item2.indexOf(this.systemResult) > -1) {
            item.multiples[index][0] = 1
            item.multiples[index][1] = item.multiples[index][1] * 2
          } else {
            item.multiples[index][0] = item.multiples[index][0] * 2
            item.multiples[index][1] = 1
          }
        })
        item.hitTotalSize = item.dataList[0].hitTotalSize
      })
      console.log("222this.modelList[0].multiples is ",JSON.stringify(this.modelList[0].multiples));
      console.log("222this.modelList[0].multiplesBak is",JSON.stringify(this.modelList[0].multiplesBak));
      this.totalDataList[0].systemResult=this.systemResult
      this.hitTotalSize = eval(this.totalDataList.map(item =>[item.A,item.B,item.C,item.D][['A','B','C','D'].indexOf(item.systemResult)]).join("+"))
      this.totalDataList[0].hitTotalSize =this.hitTotalSize
      this.canBuy=true
      this.canCancel=true
      this.isUpdate = !this.isUpdate;
    },
    handleChange(value) {
      console.log(value);
    },
    handleDetail(value) {
      this.dataList = value
      this.detailOpen = true
    },
    handleChangeBuyTimes(value) {
      while (this.multiples.length < value){
        this.multiples.push([1,1])
      }
      console.log(value);
    },
    cancelSystem() {
      if (!this.canCancel || !this.modelList){
        return;
      }
      console.log("333this.modelList[0].multiples is ",JSON.stringify(this.modelList[0].multiples));
      console.log("333this.modelList[0].multiplesBak is",JSON.stringify(this.modelList[0].multiplesBak));
      this.modelList.forEach(item =>{
        let lastItem = item.dataList[0];
        lastItem.systemResult=null
        lastItem.hitTotalSize = null
        item.multiples=[].concat(JSON.parse(JSON.stringify(item.multiplesBak)));
        item.multiplesBak=null;
        item.hitTotalSize = null
      })
      console.log("444this.modelList[0].multiples is ",JSON.stringify(this.modelList[0].multiples));
      console.log("444this.modelList[0].multiplesBak is",JSON.stringify(this.modelList[0].multiplesBak));
      this.totalDataList[0].systemResult='-'
      this.hitTotalSize = eval(this.totalDataList.map(item =>[item.A,item.B,item.C,item.D][['A','B','C','D'].indexOf(item.systemResult)]).join("+"))
      this.totalDataList[0].hitTotalSize =this.hitTotalSize
      this.canBuy = false
      this.canCancel = false
      this.systemResult = null
      this.modelList2 = [...this.modelList].sort((a,b)=>b.maxSize - a.maxSize).slice(0,10)
      this.isUpdate = !this.isUpdate;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
